"use client"

import { useState } from "react"
import { Button, Select, Rate, Divider, Typography, Tag, Image, Carousel, List, Modal } from "antd"
import { HeartOutlined, CustomerServiceOutlined, ShopOutlined, LeftOutlined, ShareAltOutlined } from "@ant-design/icons"
import "./Product.css"
import { useNavigate } from "react-router-dom"

const { Title, Text, Paragraph } = Typography
const { Option } = Select

const Product = () => {
  const [quantity, setQuantity] = useState(1)
  const [selectedColor, setSelectedColor] = useState("黑色")
  const [selectedStorage, setSelectedStorage] = useState("128G")
  const [modalVisible, setModalVisible] = useState(false)
  const [currentSpecType, setCurrentSpecType] = useState("")

  const productInfo = {
    name: "小米12 Pro 天玑版 天玑9000+芯片组 5000万像素",
    subtitle: "影像 2K超视感屏 120Hz高刷 67W快充",
    description: "天玑9000+旗舰芯片，5160mAh大电池，2K Amoled柔性直屏",
    features: "影像｜2K超视感屏｜120Hz｜高刷",
    price: 2999,
    originalPrice: 2999,
    rating: 4.8,
    reviewCount: 1268,
    colors: ["黑色", "白色", "蓝色", "绿色"],
    storage: ["128G", "256G", "512G"],
    productImages: ["/images/phone-.png", "/images/phone-.png", "/images/phone-.png", "/images/phone-.png"],
  }

  const handleSpecClick = (specType) => {
    if (specType === "颜色分类" || specType === "存储容量") {
      setCurrentSpecType(specType)
      setModalVisible(true)
    }
  }

  const handleSpecSelect = (value) => {
    if (currentSpecType === "颜色分类") {
      setSelectedColor(value)
    } else if (currentSpecType === "存储容量") {
      setSelectedStorage(value)
    }
    setModalVisible(false)
  }

  const renderSpecSelector = () => {
    if (currentSpecType === "颜色分类") {
      return (
        <div className="spec-selector">
          <div className="selector-title">选择颜色</div>
          <div className="color-options">
            {productInfo.colors.map((color) => (
              <div
                key={color}
                className={`color-option ${selectedColor === color ? "selected" : ""}`}
                onClick={() => handleSpecSelect(color)}
              >
                <div className={`color-circle color-${color}`}></div>
                <span className="color-name">{color}</span>
              </div>
            ))}
          </div>
        </div>
      )
    } else if (currentSpecType === "存储容量") {
      return (
        <div className="spec-selector">
          <div className="selector-title">选择存储容量</div>
          <div className="storage-options">
            {productInfo.storage.map((storage) => (
              <div
                key={storage}
                className={`storage-option ${selectedStorage === storage ? "selected" : ""}`}
                onClick={() => handleSpecSelect(storage)}
              >
                {storage}
              </div>
            ))}
          </div>
        </div>
      )
    }
    return null
  }

  const productSpecs = [
    { label: "颜色分类", value: `${selectedColor} ${selectedStorage}`, hasArrow: true },
    { label: "商品产地", value: "全新", hasArrow: true },
    { label: "存储容量", value: "暂无选择", hasArrow: true },
    { label: "保修方式", value: "暂无选择", hasArrow: true },
  ]

  const navigate = useNavigate()

  const handleAddToCart = () => {
    console.log("加入购物车")
    navigate("/order")
  }

  const handleBuyNow = () => {
    console.log("立即购买")
    navigate("/order")
  }

  const handleBack = () => {
    console.log("返回")
    navigate(-1)
  }

  const handleShare = () => {
    console.log("分享")
  }

  return (
    <div className="product-container">
      {/* 顶部导航栏 */}
      <div className="header">
        <Button type="text" icon={<LeftOutlined />} className="back-btn" onClick={handleBack} />
      </div>

      {/* 产品图片轮播 */}
      <div className="image-section">
        <Carousel dots={{ className: "custom-dots" }} autoplay={false} className="product-carousel">
          {productInfo.productImages.map((image, index) => (
            <div key={index} className="carousel-slide">
              <Image
                src={image || "/placeholder.svg"}
                alt={`产品图片 ${index + 1}`}
                className="carousel-image"
                preview={false}
              />
            </div>
          ))}
        </Carousel>
      </div>

      {/* 产品信息 */}
      <div className="info-section">
        <div className="product-title-section">
          <Title level={3} className="product-title">
            {productInfo.name}
          </Title>
          <Paragraph className="product-subtitle">{productInfo.subtitle}</Paragraph>
          <Text className="product-description">{productInfo.description}</Text>
          <div className="features">
            <Text className="features-text">{productInfo.features}</Text>
          </div>
        </div>

        {/* 价格区域 */}
        <div className="price-section">
          <div className="price-row">
            <Text className="current-price">¥{productInfo.price}</Text>
            <Text className="original-price" delete>
              ¥{productInfo.originalPrice}
            </Text>
            <Tag color="red" className="discount-tag">
              限时
            </Tag>
          </div>

          <div className="rating-row">
            <Rate disabled defaultValue={productInfo.rating} allowHalf size="small" />
            <Text className="rating-text">好评率98%</Text>
          </div>
        </div>

        <Divider className="divider" />

        {/* 规格列表 */}
        <div className="specs-section">
          <List
            dataSource={productSpecs}
            renderItem={(item) => (
              <List.Item className="spec-item" onClick={() => handleSpecClick(item.label)}>
                <div className="spec-content">
                  <Text className="spec-label">{item.label}</Text>
                  <div className="spec-value-container">
                    <Text className="spec-value">{item.value}</Text>
                    {item.hasArrow && <Text className="spec-arrow">{">"}</Text>}
                  </div>
                </div>
              </List.Item>
            )}
          />
        </div>
      </div>

      {/* 规格选择弹窗 */}
      <Modal
        title=""
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        footer={null}
        className="spec-modal"
        centered
      >
        {renderSpecSelector()}
      </Modal>

      {/* 底部操作栏 */}
      <div className="bottom-bar">
        <div className="bottom-actions">
          <div className="service-buttons">
            <Button type="text" icon={<CustomerServiceOutlined />} className="service-btn">
              客服
            </Button>
            <Button type="text" icon={<ShopOutlined />} className="service-btn">
              店铺
            </Button>
            <Button type="text" icon={<HeartOutlined />} className="service-btn">
              收藏
            </Button>
          </div>

          <div className="purchase-buttons">
            <Button className="add-cart-btn" onClick={handleAddToCart}>
              加入购物车
            </Button>
            <Button type="primary" className="buy-now-btn" onClick={handleBuyNow}>
              立即购买
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Product
